import MyMusic from './components/MyMusic'
import FindMusic from './components/FindMusic'
import MyFollow from './components/MyFollow'
import NotFound from './components/NotFound'
import SongList from './components/SongList'
import './App.css'
// HashRouter 包裹整个应用
// Route 路由出口组件
// Link 路由的入口组件
// !#1
import {
  HashRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'

// 路由：Hash 地址和组件之间的对应关系
export default function App() {
  // !#2 HashRouter 包裹整个应用
  return (
    <Router>
      <nav className='navbar navbar-expand-lg navbar-light bg-light'>
        <div className='container'>
          <Link className='navbar-brand' to='/'>
            网易云
          </Link>
          <button
            className='navbar-toggler'
            type='button'
            data-bs-toggle='collapse'
            data-bs-target='#navbarSupportedContent'
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className='collapse navbar-collapse' id='navbarSupportedContent'>
            <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
              {/* //!#3 指定入口 */}
              <li className='nav-item'>
                {/* 原因：NavLink 组件 to 属性对应的值如果是 /，则表示，只要是以 / 开头的就会被添加 class，当访问 /mymusic 的时候，发现是以 / 开头的，所以这里也加了 class，/myfollow 同理。 */}
                {/* exact 表示精确匹配，只有访问的地址是 / 才应用高亮的 class */}
                <NavLink className='nav-link' to='/findmusic'>
                  发现音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                <NavLink className='nav-link' to='/mymusic'>
                  我的音乐
                </NavLink>
              </li>
              <li className='nav-item'>
                <NavLink className='nav-link' to='/myfollow'>
                  关注
                </NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className='container mt-3'>
        <div className='card'>
          <div className='card-body'>
            <Switch>
              <Redirect from='/' to='/findmusic' exact />
              {/* //!一般情况下，如果父路由存在子路由，父路由的出口都不要加 exact */}
              <Route path='/findmusic' component={FindMusic} />
              <Route path='/mymusic' component={MyMusic} />
              <Route path='/myfollow' component={MyFollow} />
              {/* 一个不带 path 属性的 Route，默认情况下其实会一直被渲染 */}
              <Route component={NotFound} />
            </Switch>
          </div>
        </div>
      </div>
    </Router>
  )
}
